<template>
  <div class="dictTree">
    <addHeader @click="add"></addHeader>
    <div class="treeBody">
      <el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
    </div>
    <el-dialog title="新增" :visible.sync="dialogVisible" :destroy-on-close="true" :close-on-click-modal="false"
      width="500px">
      <dictForm ref="dictForm"></dictForm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="addDics">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addHeader from "../../common/addHeader";
import dictForm from "./dictForm";
export default {
  name: "dictTree",
  components: {
    addHeader,
    dictForm
  },
  data() {
    return {
      dialogVisible: false,
      treeData: [],
      selectNode: null,
      nodekey: '',
      defaultProps: {
        children: 'childDicTreeVOS',
        label: 'dicDisplay'
      }
    };
  },
  mounted() {
    this.getDicTree();
  },
  methods: {
    addDics() {
      this.$refs.dictForm.validate().then(res => {
        let params = {
          "dicDisplay": this.$refs.dictForm.form.dicDisplay,
          "dicParentId": this.$refs.dictForm.form.dicParentId,
          "dicValue": this.$refs.dictForm.form.dicValue,
        }
        this.$api.addDics(params).then(res => {
          this.$message.success('新增成功')
          this.dialogVisible = false
          this.getDicTree();
          this.$emit('getSelectNode', this.selectNode)
        })
      })

    },
    add() {
      if (this.selectNode == null) {
        this.$message.warning('请选择节点')
        return;
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.dictForm.form.dicParentName = this.selectNode.dicDisplay
        this.$refs.dictForm.form.dicParentId = this.selectNode.id
      })
    },
    handleNodeClick(data) {
      this.selectNode = data;
      this.$emit('getSelectNode', data)
    },
    getDicTree() {
      let params = { id: 0 }
      this.$api.getDicTree(params).then(res => {
        this.treeData = res.data
      })
    },
  }
}
</script>

<style scoped lang="less">
.el-tree {
  background-color: transparent;
}

.dictTree {
  width: 200px;
  height: 100%;

  border-right: 1px solid #eee;
  .treeBody {
    width: 100%;
    height: calc(100% - 49px);
    background-color: #fafafa;
    overflow-y: auto;
  }
}
</style>